<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易云音乐</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<img class="song-albumImg" th:src="${song.albumImg}"/>
<h1 class="song-name" th:text="${song.name}"></h1>

<a href="#" th:data-id="${song.id}" class="play-btn">播放</a>
<audio  id="player" style="display: none;" src="" controls="controls"></audio>

<h3>
    <label>歌手: </label><span class="song-singer" th:text="${song.singer}"></span>
</h3>

<h3>
    <label>所属专辑: </label><span class="song-albumName" th:text="${song.albumName}"></span>
</h3>
<h3>
    <label>评论数: </label><span class="song-commentCount" th:text="${song.commentCount}"></span>
</h3>
<div class="song-lyrics" th:utext="${song.lyrics}"></div>
<h3>
    <label>相似歌曲 </label>
</h3>
<ul>
    <li>
        <a href="#" class="change-song" data-id="1805905104">往后余生</a>
        <a href="#" class="player-btn" data-id="1805905104">播放</a>
    </li>
</ul>

<script>
    $(function(){
        $('.play-btn').on('click',function(e) {
            e.preventDefault();
            var songId = $(this).data("id");
            $.ajax({
                url: 'song/music',
                method: 'GET',
                data: {
                    songId: songId
                },
                cache: false
            }).done(function (data) {
                $('#player').show();
                $('#player').attr('src', data);
                document.getElementById('player').play();
            });
        });
        $(".change-song").on('click',function (e) {
            e.preventDefault();
            var songId = $(this).data("id");
            $.ajax({
                url:"/songinfo/get",
                method:"GET",
                data:{
                    songId:songId
                },
                cache:false
            })
                .done(function (data) {
                    $('.song-albumImg').attr('src',data.albumImg);
                    $('.song-albumName').html(data.albumName);
                    $('.song-commentCount').html(data.commentCount);
                    $('.song-lyrics').html(data.lyrics);
                    $('.song-name').html(data.name);
                    $('.song-singer').html(data.singer);
                });
        })
    });
</script>
</body>
</html>